{{ header }}
<script>
	!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
		n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
		n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
		t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
		document,'script','https://connect.facebook.net/en_US/fbevents.js');
		    {% for option in jan %}
			   fbq('init', {{ option }});
		    {% endfor %}
			
			fbq('track', "PageView");
	fbq('track', "ViewContent");
</script>
<div id="product-product" class="container">
    <div id="content">
        {#提示框#}
        <div id="tipModule"></div>
        {#蒙板#}
        <div class="mask"></div>
        {#发表评论蒙板#}
        <form class="form-horizontal" id="form-review">
            <div class="write-title">
                {{ text_write }}
                <i class="close-write iconfont icon-cha"></i>
            </div>
            {% if review_guest %}
                <div class="form-group">
                    <div class="col-sm-12">
                        <label class="control-label" for="input-name">{{ entry_name }}</label>
                        <input type="text" name="name" value="{{ customer_name }}" id="input-name"
                               class="form-control"/>
                    </div>
                </div>
                <div class="form-group required">
                    <div class="col-sm-12">
                        <label class="control-label" for="input-review">{{ entry_review }}</label>
                        <textarea name="text" rows="5" id="input-review"
                                  class="form-control" style="resize: none"></textarea>
                        {#<div class="help-block">{{ text_note }}</div>#}
                    </div>
                </div>
                <div class="form-group required">
                    <div class="col-sm-12 flex-center">
                        <label class="control-label">{{ entry_rating }}</label>
                        <div class="stars">
                            <label>
                                <span class="star fa fa-stack">
                                    <i class="star fa fa-star-o fa-stack-1x"></i>
                                </span>
                                <input type="radio" name="rating" value="1"/>
                            </label>
                            <label>
                                <span class="star fa fa-stack">
                                    <i class="star fa fa-star-o fa-stack-1x"></i>
                                </span>
                                <input type="radio" name="rating" value="2"/>
                            </label>
                            <label>
                                 <span class="star fa fa-stack">
                                     <i class="star fa fa-star-o fa-stack-1x"></i>
                                 </span>
                                <input type="radio" name="rating" value="3"/>
                            </label>
                            <label>
                                 <span class="star fa fa-stack">
                                     <i class="star fa fa-star-o fa-stack-1x"></i>
                                 </span>
                                <input type="radio" name="rating" value="4"/>
                            </label>
                            <label>
                                 <span class="star fa fa-stack">
                                    <i class="star fa fa-star-o fa-stack-1x"></i>
                                 </span>
                                <input type="radio" name="rating" value="5"/>
                            </label>
                        </div>
                    </div>
                </div>
                {{ captcha }}
                <div class="buttons clearfix">
                    <div class="pull-right">
                        <button type="button" id="button-review"
                                data-loading-text="{{ text_loading }}">{{ button_continue }}</button>
                    </div>
                </div>
            {% else %}
                {{ text_login }}
            {% endif %}
        </form>
        {#商品詳情#}
        <div class="product-content">
            {#轮播#}
            <div id="goods-img-banner" class="swiper-container">
                <ul class="swiper-wrapper" style="list-style: none;padding: 0;">
                    <li class="swiper-slide text-center">
                        <a class="thumbnail goods-img" href="javascript:" title="{{ heading_title }}">
                            <img src="{{ popup }}" alt="{{ heading_title }}" class="img-responsive"/>
                        </a>
                    </li>
                    {% for image in images %}
                        <li class="swiper-slide text-center">
                            <a class="thumbnail goods-img" href="javascript:" title="{{ heading_title }}">
                                <img src="{{ image.popup }}" alt="{{ heading_title }}" class="img-responsive"/>
                            </a>
                        </li>
                    {% endfor %}
                </ul>
                <div class="swiper-pagination slideshow-point"></div>
            </div>
            <script type="text/javascript">
                var options = {
                    mode: 'horizontal',
                    slidesPerView: 1,
                    pagination: '.slideshow-point',
                    paginationClickable: true,
                    autoplay: 2500,
                    autoplayDisableOnInteraction: true,
                };
                if($('#goods-img-banner .swiper-wrapper').find('.swiper-slide').length > 1){
                    options.loop = true;
                }
                $('#goods-img-banner').swiper(options);
            </script>
            {#价格#}
            <div class="product-price">
                <div class="price-box">
                    {% if not special %}
                        <h3>{{ price }}</h3>
                    {% else %}
                        <h3>{{ special }}</h3>
                        <span style="text-decoration: line-through;padding: 0 6px;">{{ price }}</span>
                    {% endif %}
                </div>
                {#服務承諾#}
                <div class="commitment">
                    <span>{{ text_free }}</span>
                    <span>{{ text_cash_on_delivery }}</span>
                    <span style="background-color: #000000;">{{ text_seven }}</span>
                </div>
            </div>
            {#倒计时#}
            <div class="send">
                <div style="opacity: 0"><img src="/ueditor/php/upload/image/images/heimao.png" alt="">{{ text_black_cat }}</div>
                <div id="countdown">
                    {#限時搶購<span class="kill-number">99</span>時<span class="kill-number">88</span>分<span class="kill-number">77</span>秒#}
                </div>
            </div>
            {#抢购进度#}
            <div class="progress-box">
                {{ text_push }} {{ text_di }}{{ sales_volume }}
                <div class="product-progress">
                    {#100 - (銷量/庫存*100)#}
                    <div class="progress-color" style="left: -{{ 100-(sales_volume/quantity*100) }}%"></div>
                    {#<span>{{ product.sales_volume }} SOLD</span>#}
                </div>
                {{ sales_volume_bai }}%
            </div>
            {#商品名称#}
            <h2><strong>{{ heading_title }}</strong>{{ heading_title_m }}<strong>{{ heading_title_l }}</strong></h2>
            {#導航#}
            <div class="nav" id="nav">
                <div id="toInfo">{{ tab_description }}</div>
                <div id="toGuige">{{ tab_attribute }}</div>
                <div id="toMessage">{{ tab_review }}</div>
            </div>
            {#商品详情#}
            <div class="description" id="goods-info">
                {{ magevideo }}
            </div>
            {#商品規格#}
            <div class="description" id="goods-guige">
                {{ magevideotwo }}
            </div>
            {#评论#}
            {% if reviewsexit %}
            <div class="message" id="message">
                <div class="message-title">
                    <div class="message-info">
                        <div>{{ tab_review }}</div>
                        {#<span style="color: #fc3e2a">{{ rating }}/5</span>#}
                        {#<span style="color: #757575">({{ reviews }})</span>#}
                    </div>
                </div>
                <div id="messageBox">
                    <ul id="review"></ul>
                </div>
                <div class="message-write">
                    <span class="write-message" id="writeMessage">{{ text_write }}</span>
                </div>
            </div>
            {% else %}
                <div class="message" id="message"></div>
            {% endif %}
            {#用戶須知#}
            <div class="user-know">
                <div class="user-know-title">
                    ·用戶須知
                </div>
                <div class="user-know-content">
                    本產品的實際使用效果根據個人情況決定，不保證每位用戶都能享受到所宣傳的效果。若有疑問請諮詢在線客服或通過電子郵箱(
                    <a href="mailto:{{ mpn }}" style="color:#F8770E">{{ mpn }}</a>
                    )聯絡我們，本公司享有最終解釋權。
                </div>
                <div class="user-know-title">
                    ·如何申請退換貨
                </div>
                <div class="user-know-content">
                    <div>1.由於個人原因產生的退換貨：至收到商品之日起7天內，在不影響二次銷
                        售的情況下請聯繫我們的在線客服或發郵件至
                        <a href="mailto:{{ mpn }}" style="color:#F8770E">{{ mpn }}</a>
                        ，售後
                        客服會在收到消息後的1-3個工作日內受理您的請求，退換貨所產生的運費
                        需自行承擔。
                    </div>
                    <div>2.由於質量原因產生的退換貨：至收到商品之日起7天內，向售後服務中心
                        發送郵件至
                        <a href="mailto:{{ mpn }}" style="color:#F8770E">{{ mpn }}</a>
                        ，客服會在收到郵件後的1-3個工作日內受
                        理您的請求，退換貨所產生的運費由我方承擔。
                    </div>
                </div>
                <div class="user-know-title">
                    ·退換貨流程
                </div>
                <div class="user-know-content">
                    確認收貨—申請退換貨—客服審核通過—用戶寄回商品—倉庫簽收驗貨—退
                    換貨審核—退款/換貨；<br>
                    退換貨請註明：訂單號、姓名、電話。
                </div>
                <div class="user-know-title">
                    ·如何取消訂單
                </div>
                <div class="user-know-content">
                    取消訂單需要向售後服務中心發送郵件並註明相關原因，郵件內容應註明您的訂單號、姓名、電話。
                </div>
            </div>
            {#底部购买栏#}
            <div class="bottom-btn">
                <div class="cart between">
                    <i class="iconfont icon-dingdan"></i>
                    <span>{{ text_query }}</span>
                </div>
                <div class="buy">
                    <i class="iconfont icon-head104"></i>
                    {{ button_buy }}
                </div>
                <div class="kefu between">
                    <i class="iconfont icon-service"></i>
                    <span>{{ text_online }}</span>
                </div>
            </div>
        </div>
        {#商品规格蒙板#}
        <div id="product">
            {#头部#}
            {#<div class="product-header">#}
                {#<i class="iconfont icon-flow" id="closeProduct"></i>#}
                {#<span>{{ text_order }}</span>#}
            {#</div>#}
            {#<div class="product-name">#}
                {#<div class="img-box">#}

                    {#<img class="product-img" src="{{ image_min }}" alt="{{ text_option }}">#}
                    {#<img class="product-img" src="{{ popup }}" alt="{{ text_option }}">#}
                    {#<div class="price" id="initPrice">{% if not special %}{{ price }}{% else %}{{ special }}{% endif %}</div>#}
                {#</div>#}
                {#<div class="product-text">#}
                    {#<div>{{ meta_title }}</div>#}
                    {#<div><span>{{ heading_title }}</span>{{ heading_title_m }}<span>{{ heading_title_l }}</span></div>#}
                {#</div>#}
            {#</div>#}
            {% if options %}
                {% set have_more = 0 %}
                <div class="product-option">
                    <div class="options-list">
                        {% set index = 0 %}
                        {% for option in options %}
                            {% if option.type == 'select' %}
                                <div class="form-group{% if option.required %} required {% endif %}">
                                    <label class="control-label"
                                           for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                                    <select name="option[{{ option.product_option_id }}]"
                                            id="input-option{{ option.product_option_id }}" class="form-control">
                                        <option value="">{{ text_select }}</option>
                                        {% for option_value in option.product_option_value %}
                                            <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
                                                {% if option_value.price %}
                                                    ({{ option_value.price_prefix }}{{ option_value.price }})
                                                {% endif %} </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            {% endif %}
                            {% if option.type == 'radio' %}
                                {% if index == 0 %}
                                    <div class="option-header" onclick="hideOptions(this)">{{ text_di }}<span class="indexNum">1</span>{{ text_jian }}<span class="indexPrice">({% if not special %}{{ price }}{% else %}{{ special }}{% endif %}</span>,
                                        <span class="selecting"></span>
                                        {{ text_only }}{{ stock }}{{ text_jian }})
                                        <i class="iconfont icon-jiantouxia"></i>
                                    </div>
                                {% endif %}
                                {% set index = index + 1 %}
                                {% if option.namer == '###' %}
                                    <input type="hidden" name="haveMore" value="10086">
                                    <div class="option-header" onclick="hideOptions(this)"
                                         style="border-top: 1px dashed #d9d9d9;">{{ text_di }}<span class="indexNum">2</span>{{ text_jian }}(<span class="indexPrice">{{ text_zero }}</span>
                                        <span class="selecting"></span>
                                        {{ text_only }}{{ stock }}{{ text_jian }})
                                        <i class="iconfont icon-jiantouxia"></i>
                                    </div>
                                {% endif %}
                                <div class="newRadio form-group">
                                    <label class="control-label optionName">{{ option.name }}</label>
                                    <div class="radio-box" id="input-option{{ option.product_option_id }}">
                                        {% for option_value in option.product_option_value %}
                                            {% if option_value.image %}
                                                <div data-name="{{ option.name }}" class="img-radio" {% if option_value.price %} data-changenum="{{ option_value.price }}" data-changetype="{{ option_value.price_prefix }}"{% else %} data-changenum="0" data-changetype="+"{% endif %}>
                                                    <label>
                                                        <input type="radio"
                                                               name="option[{{ option.product_option_id }}]"
                                                               value="{{ option_value.product_option_value_id }}"/>
                                                        <img src="{{ option_value.image }}"
                                                             alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}"
                                                             class="img-thumbnail"/>
                                                        <div class="option-name">
                                                            {{ option_value.name }}
                                                            {#{% if option_value.price %}({{ option_value.price_prefix }}{{ option_value.price }}){% endif %}#}
                                                        </div>
                                                    </label>
                                                </div>
                                            {% else %}
                                                <div data-name="{{ option.name }}" class="radio" {% if option_value.price %} data-changenum="{{ option_value.price }}" data-changetype="{{ option_value.price_prefix }}"{% else %} data-changenum="0" data-changetype="+"{% endif %}>
                                                    <label>
                                                        <input type="radio"
                                                               name="option[{{ option.product_option_id }}]"
                                                               value="{{ option_value.product_option_value_id }}"/>
                                                        <div class="option-name">
                                                            {{ option_value.name }}
                                                            {#{% if option_value.price %}({{ option_value.price_prefix }}{{ option_value.price }}){% endif %}#}
                                                        </div>
                                                    </label>
                                                </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                            {% endif %}
                            {% if option.type == 'checkbox' %}
                                <div class="form-group{% if option.required %} required {% endif %}">
                                    <label class="control-label">{{ option.name }}</label>
                                    <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox"
                                                           name="option[{{ option.product_option_id }}][]"
                                                           value="{{ option_value.product_option_value_id }}"/>
                                                    {% if option_value.image %} <img src="{{ option_value.image }}"
                                                                                     alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}"
                                                                                     class="img-thumbnail"/> {% endif %}
                                                    {{ option_value.name }}
                                                    {% if option_value.price %}
                                                        ({{ option_value.price_prefix }}{{ option_value.price }})
                                                    {% endif %} </label>
                                            </div>
                                        {% endfor %} </div>
                                </div>
                            {% endif %}
                            {% if option.type == 'text' %}
                                <div class="form-group{% if option.required %} required {% endif %}">
                                    <label class="control-label"
                                           for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                                    <input type="text" name="option[{{ option.product_option_id }}]"
                                           value="{{ option.value }}" placeholder="{{ option.name }}"
                                           id="input-option{{ option.product_option_id }}" class="form-control"/>
                                </div>
                            {% endif %}
                            {% if option.type == 'textarea' %}
                                <div class="form-group{% if option.required %} required {% endif %}">
                                    <label class="control-label"
                                           for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                                    <textarea name="option[{{ option.product_option_id }}]" rows="5"
                                              placeholder="{{ option.name }}"
                                              id="input-option{{ option.product_option_id }}"
                                              class="form-control">{{ option.value }}</textarea>
                                </div>
                            {% endif %}
                            {% if option.type == 'file' %}
                                <div class="form-group{% if option.required %} required {% endif %}">
                                    <label class="control-label">{{ option.name }}</label>
                                    <button type="button" id="button-upload{{ option.product_option_id }}"
                                            data-loading-text="{{ text_loading }}" class="btn btn-default btn-block"><i
                                                class="fa fa-upload"></i> {{ button_upload }}</button>
                                    <input type="hidden" name="option[{{ option.product_option_id }}]" value=""
                                           id="input-option{{ option.product_option_id }}"/>
                                </div>
                            {% endif %}
                            {% if option.type == 'date' %}
                                <div class="form-group{% if option.required %} required {% endif %}">
                                    <label class="control-label"
                                           for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                                    <div class="input-group date">
                                        <input type="text" name="option[{{ option.product_option_id }}]"
                                               value="{{ option.value }}" data-date-format="YYYY-MM-DD"
                                               id="input-option{{ option.product_option_id }}" class="form-control"/>
                                        <span class="input-group-btn">
                <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                </span></div>
                                </div>
                            {% endif %}
                            {% if option.type == 'datetime' %}
                                <div class="form-group{% if option.required %} required {% endif %}">
                                    <label class="control-label"
                                           for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                                    <div class="input-group datetime">
                                        <input type="text" name="option[{{ option.product_option_id }}]"
                                               value="{{ option.value }}" data-date-format="YYYY-MM-DD HH:mm"
                                               id="input-option{{ option.product_option_id }}" class="form-control"/>
                                        <span class="input-group-btn">
                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                </span></div>
                                </div>
                            {% endif %}
                            {% if option.type == 'time' %}
                                <div class="form-group{% if option.required %} required {% endif %}">
                                    <label class="control-label"
                                           for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                                    <div class="input-group time">
                                        <input type="text" name="option[{{ option.product_option_id }}]"
                                               value="{{ option.value }}" data-date-format="HH:mm"
                                               id="input-option{{ option.product_option_id }}" class="form-control"/>
                                        <span class="input-group-btn">
                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                </span></div>
                                </div>
                            {% endif %}
                        {% endfor %}
                        <div class="option-header" style="height: 0;border-bottom: 1px solid #eeeeee;"></div>
                    </div>
                </div>
            {% endif %}
            {#【限時特惠】再來兩件，僅需NT$300#}
            <div class="have-more">
                <div class="more-btn">
                    {{ upc }}{% if not special %}{{ price }}{% else %}{{ special }}{% endif %}
                </div>
            </div>
            {% if recurrings %}
                <hr>
                <h3>{{ text_payment_recurring }}</h3>
                <div class="form-group required">
                    <select name="recurring_id" class="form-control">
                        <option value="">{{ text_select }}</option>
                        {% for recurring in recurrings %}
                            <option value="{{ recurring.recurring_id }}">{{ recurring.name }}</option>
                        {% endfor %}
                    </select>
                    <div class="help-block" id="recurring-description"></div>
                </div>
            {% endif %}
            <div class="form-group buy-count">
                <label class="control-label" for="input-quantity">{{ entry_qty }}:</label>
                <div class="change-number">
                    <i class="iconfont icon-jian" id="minus"></i>
                    <input type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" disabled style="background-color: #fff;width: 30px;"/>
                    <i class="iconfont icon-jia" id="plus"></i>
                    <input type="hidden" name="product_id" value="{{ product_id }}"/>
                </div>
                {#<br/>#}
                {#<button type="button" id="button-cart" data-loading-text="{{ text_loading }}"#}
                {#class="btn-block">{{ button_cart }}</button>#}
            </div>
            {% if minimum > 1 %}
                <div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_minimum }}</div>
            {% endif %}
            {#確認訂單#}
            <div class="confirm-order">
                <div id="haveMoreDom"></div>

                <div>{{ text_count }}:<span id="countPrice" style="font-size: 17px;">{% if not special %}{{ price }}{% else %}{{ special }}{% endif %}</span></div>


                <input type="hidden" value="{{ pricetb }}" disabled id="hiddenorder-money"
                       class="form-control hide-pay"/>
                <input type="hidden" value="{{ pricetb }}" disabled id="order-money" class="form-control hide-pay"/>

            </div>
            {#購物車#}
            <div id="scrollBuy">
                <div class="panel-collapse " id="collapse-payment-address">
                    {{ guesthtml }}
                </div>
                {{ confirm }}
            </div>
            {#溫習提示#}
            <div class="tip">
                溫馨提示：支持貨到付款+免郵費+七天無理由退換貨！收到商品後有任何疑問請聯繫我們在線客服，或發郵件至
                <a href="mailto:{{ mpn }}" style="color:#F8770E">{{ mpn }}</a>
            </div>
        </div>
    </div>
    <input type="hidden" id="home_date_now" value="{{ date_now }}">
    <input type="hidden" id="home_date_end" value="{{ date_end }}">
    <input type="hidden" id="max_buy" value="{{ maxnum }}">
</div>
<script>
    $(function () {
        countdown($('#home_date_now').val(), $('#home_date_end').val());
        hideD();
        haveMore();
        videoWidth();
    });
    // 视频标签自适应宽度
    function videoWidth() {
        $('.description').find('video').attr('width','100%;');
    }
    // 判斷是否有贈品
    function haveMore() {
        var have = '<span id="countNumber" data-num="1">2</span>{{ text_allnum }}，{{ text_giving }}<span>1</span>gift';
        var haveNot = '<span id="countNumber" data-num="0">1</span>{{ text_allnum }}';
        if($('input[name=haveMore]').val() == undefined){
            $('#haveMoreDom').html(haveNot);
        }else {
            $('#haveMoreDom').html(have);
        }
    }
    // 倒计时
    function countdown(startTime, endTime) {
        var allTime = endTime - startTime;
        var timer = setInterval(function () {
            if (allTime <= 0) {
                $('#countdown').empty();
                clearInterval(timer);
                return false;
            }
            var h = Math.floor(allTime / 3600);
            var m = Math.floor((allTime % 3600) / 60);
            var s = (allTime % 3600) % 60;
            if (h > 99) {
                h = 99;
            }
            if (h < 10) {
                h = '0' + h;
            }
            if (m < 10) {
                m = '0' + m;
            }
            if (s < 10) {
                s = '0' + s;
            }
            var tag = '{{ text_flash_sale }}<span class="kill-number">' + h + '</span>{{ text_hour }}<span class="kill-number">' + m + '</span>{{ text_minute }}<span class="kill-number">' + s + '</span>{{ text_second }}';
            $('#countdown').html(tag);
            allTime--;
        }, 1000)
    }
    // 吸頂
    var goodsTitleTop = $('#nav').offset().top;
    window.onscroll = function () {
        if ($(window).scrollTop() >= goodsTitleTop) {
            $('#nav').addClass('position-fixed');
            $('#goods-info').css('margin-top', '36px');
        } else {
            $('#nav').removeClass('position-fixed');
            $('#goods-info').css('margin-top', '0');
        }
        // 隐藏滚动购买按钮
        // if($('#product').offset().top <= $(document).scrollTop()){
        //     $('.bottom-btn').hide();
        // }else {
        //     $('.bottom-btn').show();
        // }
    };
    // 點擊導航
    $('#toInfo').on('click', function () {
        $('html,body').stop().animate({scrollTop: $('#goods-info').offset().top - 36}, 500);
    });
    $('#toGuige').on('click', function () {
        $('html,body').stop().animate({scrollTop: $('#goods-guige').offset().top - 36}, 500);
    });
    $('#toMessage').on('click', function () {
        $('html,body').stop().animate({scrollTop: $('#message').offset().top - 36}, 500);
    });
    // 評論輪播
    var timer = setInterval(function () {
        if ($('#review div.one-ul')[0] === undefined) {
            return;
        }
        if ($('#messageBox')[0].scrollTop >= $('#review div.one-ul')[0].offsetHeight) {
            $('#messageBox')[0].scrollTop = 0;
        }
        else {
            $('#messageBox')[0].scrollTop++;
        }
    }, 35);
    $('#messageBox').on('click', function () {

    });
    // 點擊第一件
    function hideOptions(_this) {
        $(_this).nextUntil('.option-header').toggle(300);
        if ($(_this).find('.iconfont').hasClass('icon-jiantouxia')) {
            $(_this).find('.iconfont').removeClass('icon-jiantouxia').addClass('icon-jiantoushang')
        } else {
            $(_this).find('.iconfont').removeClass('icon-jiantoushang').addClass('icon-jiantouxia')
        }
    }
</script>
<script>
    // // 点赞
    $('#getLikeA').on('click', function () {
        // console.log($('#getLikea').find('iframe')[0].contentWindow);
    });
    // 点击蒙板空白区域
    $('.mask').on('click', function () {
        $('body').css('overflow', 'visible');
        $('.product-header').css('z-index', '0');
        $('.mask').stop().hide();
        $('.more-list').stop().slideUp(100);
        $('.coupons-module').stop().slideUp(300);
        $('#product').stop().slideUp(300);
        $('.integral-module').stop().slideUp(300);
        $('#form-review').stop().slideUp(300);
        $('.commitment-module').stop().slideUp(300);
    });
    // 评论蒙板
    $('#writeMessage').on('click', function () {
        $('.mask').stop().show();
        $('#form-review').stop().slideDown(300);
        $('body').css('overflow', 'hidden');
        $('#product-product #form-review .stars').html(
            '<label><span class="star fa fa-stack"><i class="star fa fa-star-o fa-stack-1x"></i></span><input type="radio" name="rating" value="1"/></label>' +
            '<label><span class="star fa fa-stack"><i class="star fa fa-star-o fa-stack-1x"></i></span><input type="radio" name="rating" value="2"/></label>' +
            '<label><span class="star fa fa-stack"><i class="star fa fa-star-o fa-stack-1x"></i></span><input type="radio" name="rating" value="3"/></label>' +
            '<label><span class="star fa fa-stack"><i class="star fa fa-star-o fa-stack-1x"></i></span><input type="radio" name="rating" value="4"/></label>' +
            '<label><span class="star fa fa-stack"><i class="star fa fa-star-o fa-stack-1x"></i></span><input type="radio" name="rating" value="5"/></label>'
        );
    });
    $('.close-write').on('click', function () {
        $('.mask').stop().hide();
        $('#form-review').stop().slideUp(300);
        $('body').css('overflow', 'visible');
    });

    // 规格蒙板
    $('.bottom-btn>.cart').on('click', function () {
        window.location.href = '/query.html'
    });
    $('.bottom-btn>.buy').on('click', function () {
        // $('#product').stop().show();
        // $('.product-content').stop().hide();
        // $('body,html').scrollTop(0);
        // $('html,body').stop().animate({scrollTop: $('#scrollBuy').offset().top}, 500);
        console.log($('#button-confirm'));
        $('#button-confirm').click();
    });
    $('#closeProduct').on('click', function () {
        $('#product').stop().hide();
        $('.product-content').stop().show();
        $('body,html').scrollTop(0);
    });
    // 选择规格
    $('#product-product #product .newRadio .radio-box .radio').on('click', function () {
        $(this).siblings().find('label').removeClass('radio-selected');
        $(this).find('label').addClass('radio-selected');
        if ($(this).parents('.newRadio').prev().hasClass('option-header')) {
            $(this).parents('.newRadio').prev().attr('data-id' + $(this).parent().attr('id').replace('input-option', ''), $(this).text().replace(/^\s\s*/, '').replace(/\s\s*$/, ''))
            $(this).parents('.newRadio').prev().find('.selecting').text(getValue($(this).parents('.newRadio').prev()[0].dataset))
        } else {
            $(this).parents('.newRadio').prevUntil('.option-header').prev().attr('data-id' + $(this).parent().attr('id').replace('input-option', ''), $(this).text().replace(/^\s\s*/, '').replace(/\s\s*$/, ''))
            $(this).parents('.newRadio').prevUntil('.option-header').prev().find('.selecting').text(getValue($(this).parents('.newRadio').prevUntil('.option-header').prev()[0].dataset))
        }
        if($(this)[0].dataset.name.substr($(this)[0].dataset.name.length-3) === '$$$'){
            var initPrice = Number($('#initPrice').text().replace(/[^\d.]/g,''));
            var moneyType = $('#initPrice').text().replace(/[\d.,]/g,'');
            var changeType = $(this)[0].dataset.changetype;
            var changeNum = Number($(this)[0].dataset.changenum.replace(/[^\d.]/g,''));
            var multiple = $('input[name=quantity]').val();
            var res = '';
            if(changeType == '+'){
                res = initPrice + changeNum;
            }else if(changeType == '-'){
                res = initPrice - changeNum;
            }
            $('#hiddenorder-money').val(res);
            res = res * multiple;
            res = res.toFixed(2);
            if('{{ getSymbolLeft }}'){
                res = moneyType + res;
            }else if('{{ getSymbolRight }}'){
                res = res + moneyType
            }
            $('#countPrice').text(res);
        }
    });
    $('#product-product #product .newRadio .radio-box .img-radio').on('click', function () {
        $(this).siblings().find('label').removeClass('radio-selected');
        $(this).find('label').addClass('radio-selected');
        if ($(this).parents('.newRadio').prev().hasClass('option-header')) {
            $(this).parents('.newRadio').prev().attr('data-id' + $(this).parent().attr('id').replace('input-option', ''), $(this).text().replace(/^\s\s*/, '').replace(/\s\s*$/, ''))
            $(this).parents('.newRadio').prev().find('.selecting').text(getValue($(this).parents('.newRadio').prev()[0].dataset))
        } else {
            $(this).parents('.newRadio').prevUntil('.option-header').prev().attr('data-id' + $(this).parent().attr('id').replace('input-option', ''), $(this).text().replace(/^\s\s*/, '').replace(/\s\s*$/, ''))
            $(this).parents('.newRadio').prevUntil('.option-header').prev().find('.selecting').text(getValue($(this).parents('.newRadio').prevUntil('.option-header').prev()[0].dataset))
        }
        if($(this)[0].dataset.name.substr($(this)[0].dataset.name.length-3) === '$$$'){
            var initPrice = Number($('#initPrice').text().replace(/[^\d.]/g,''));
            var moneyType = $('#initPrice').text().replace(/[\d.,]/g,'');
            var changeType = $(this)[0].dataset.changetype;
            var changeNum = Number($(this)[0].dataset.changenum.replace(/[^\d.]/g,''));
            var multiple = $('input[name=quantity]').val();
            var res = '';
            if(changeType == '+'){
                res = initPrice + changeNum;
            }else if(changeType == '-'){
                res = initPrice - changeNum;
            }
            $('#hiddenorder-money').val(res);
            res = res * multiple;
            res = res.toFixed(2);
            if('{{ getSymbolLeft }}'){
                res = moneyType + res;
            }else if('{{ getSymbolRight }}'){
                res = res + moneyType
            }
            $('#countPrice').text(res);
        }
    });
    function getValue(data) {
        var result = '{{ text_selected }}';
        for (var i in data) {
            result += data[i] + ' ';
        }
        return result;
    }
    // 隱藏$$$
    function hideD() {
        var dom = $('.optionName');
        for (var i = 0; i < dom.length; i++) {
            if($(dom[i]).text().substr($(dom[i]).text().length-3) === '$$$' || $(dom[i]).text().substr($(dom[i]).text().length-3) === '###'){
                $(dom[i]).text($(dom[i]).text().slice(0, $(dom[i]).text().length-3))
            }
        }
    }
    // 加减
    var ordermoney = $('#countPrice');
    var getSymbolLeft = '{{ getSymbolLeft }}';
    var getSymbolRight = '{{ getSymbolRight }}';
    var maxBuy = $('#max_buy').val();
    $('#minus').on('click', function () {
        var hiddenorder = Number($('#hiddenorder-money').val());
        var count = $('#product-product #product .buy-count .change-number input[name=quantity]').val();
        count--;
        if (count <= 1) {
            count = 1;
        }
        $('#product-product #product .buy-count .change-number input[name=quantity]').val(count);
        $('#countNumber').text(count + parseInt($('#countNumber')[0].dataset.num));
        if (getSymbolRight) {
            ordermoney.text((hiddenorder * count).toFixed(2) + getSymbolRight);
        } else if (getSymbolLeft) {
            ordermoney.text(getSymbolLeft + (hiddenorder * count).toFixed(2));
        } else {
            ordermoney.text((hiddenorder * count).toFixed(2));
        }
    });
    $('#plus').on('click', function () {
        var hiddenorder = Number($('#hiddenorder-money').val());
        var count = $('#product-product #product .buy-count .change-number input[name=quantity]').val();
        count++;
        if(maxBuy !== ''){
            if (count > maxBuy) {
                $('#tipModule').text('The  product purchase restrictions'+ maxBuy + 'pieces！').show();
                setTimeout(function () {
                    $('#tipModule').text('').hide();
                }, 1500);
                count = maxBuy;
                return false;
            }
        }
        $('#product-product #product .buy-count .change-number input[name=quantity]').val(count);
        $('#countNumber').text(count + parseInt($('#countNumber')[0].dataset.num));
        if (getSymbolRight) {
            ordermoney.text((hiddenorder * count).toFixed(2) + getSymbolRight);
        } else if (getSymbolLeft) {
            ordermoney.text(getSymbolLeft + (hiddenorder * count).toFixed(2));
        } else {
            ordermoney.text((hiddenorder * count).toFixed(2));
        }
    });
    // 【限時特惠】再來兩件，僅需NT$300
    $('.more-btn').on('click', function () {
        //$('#plus').click();
    });
    // 選擇評論的星星數
    $('#product-product #form-review .stars').on('click', 'input[name=rating]', function () {
        var value = $('#product-product #form-review .stars input[name=rating]:checked').val();
        var unselect = '<span class="star fa fa-stack"><i class="star fa fa-star-o fa-stack-1x"></i></span>';
        var selected = '<span class="star fa fa-stack"><i class="star fa fa-star fa-stack-1x"></i><i class="star fa fa-star-o fa-stack-1x"></i></span>'
        var tag = '';
        for (var i = 1; i <= 5; i++) {
            tag += '<label>';
            if (i <= value) {
                tag += selected;
            } else {
                tag += unselect;
            }
            if (i == value) {
                tag += '<input type="radio" name="rating" checked value="' + i + '"/>';
            } else {
                tag += '<input type="radio" name="rating" value="' + i + '"/>';
            }
            tag += '</label>';
        }
        $('#product-product #form-review .stars').html(tag);
    });
    // 点击评论滚动页面
    $('#toComments').on('click', function () {
        $('html,body').stop().animate({scrollTop: $('#message')[0].offsetTop}, 500);
    })
    // 複製折扣碼
    $('.copyCode').on('click', function () {
        var dom = $(this).siblings('.codeIn').find('input')[0];
        dom.select();
        document.execCommand("Copy");
        $('#tipModule').text('複製成功！').show();
        setTimeout(function () {
            $('#tipModule').text('').hide();
        }, 1500);
        $('.coupons-footer').click();
    })
</script>
<script type="text/javascript"><!--
    $('select[name=\'recurring_id\'], input[name="quantity"]').change(function () {
        $.ajax({
            url: 'index.php?route=product/product/getRecurringDescription',
            type: 'post',
            data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
            dataType: 'json',
            beforeSend: function () {
                $('#recurring-description').html('');
            },
            success: function (json) {
                $('.alert-dismissible, .text-danger').remove();

                if (json['success']) {
                    $('#recurring-description').html(json['success']);
                }
            }
        });
    });
    //--></script>
<script type="text/javascript"><!--
    $('#button-cart').on('click', function () {
        $.ajax({
            url: 'index.php?route=checkout/cart/add',
            type: 'post',
            data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
            dataType: 'json',
            beforeSend: function () {
                $('#button-cart').button('loading');
            },
            complete: function () {
                $('#button-cart').button('reset');
            },
            success: function (json) {
                $('.alert-dismissible, .text-danger').remove();
                $('.form-group').removeClass('has-error');

                if (json['error']) {
                    if (json['error']['option']) {
                        for (i in json['error']['option']) {
                            var element = $('#input-option' + i.replace('_', '-'));

                            if (element.parent().hasClass('input-group')) {
                                element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                            } else {
                                element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                            }
                        }
                    }

                    if (json['error']['recurring']) {
                        $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
                    }
                    if (json['error']['hasadd']) {
                        alert('您已添加該產品');
                    }

                    // Highlight any found errors
                    $('.text-danger').parent().addClass('has-error');
                }

                if (json['success']) {
                    $('.breadcrumb').after('<div class="alert alert-success alert-dismissible">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

                    $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

                    $('html, body').animate({scrollTop: 0}, 'slow');
                    window.location.href = "checkout_cart.html";
                    $('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    });
    //--></script>
<script type="text/javascript"><!--
    $('.date').datetimepicker({
        language: '{{ datepicker }}',
        pickTime: false
    });

    $('.datetime').datetimepicker({
        language: '{{ datepicker }}',
        pickDate: true,
        pickTime: true
    });

    $('.time').datetimepicker({
        language: '{{ datepicker }}',
        pickDate: false
    });

    $('button[id^=\'button-upload\']').on('click', function () {
        var node = this;

        $('#form-upload').remove();

        $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

        $('#form-upload input[name=\'file\']').trigger('click');

        if (typeof timer != 'undefined') {
            clearInterval(timer);
        }

        timer = setInterval(function () {
            if ($('#form-upload input[name=\'file\']').val() != '') {
                clearInterval(timer);

                $.ajax({
                    url: 'index.php?route=tool/upload',
                    type: 'post',
                    dataType: 'json',
                    data: new FormData($('#form-upload')[0]),
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function () {
                        $(node).button('loading');
                    },
                    complete: function () {
                        $(node).button('reset');
                    },
                    success: function (json) {
                        $('.text-danger').remove();

                        if (json['error']) {
                            $(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
                        }

                        if (json['success']) {
                            alert(json['success']);

                            $(node).parent().find('input').val(json['code']);
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
            }
        }, 500);
    });
    //--></script>
<script type="text/javascript"><!--
    $('#review').delegate('.pagination a', 'click', function (e) {
        e.preventDefault();

        $('#review').fadeOut('slow');

        $('#review').load(this.href);

        $('#review').fadeIn('slow');
    });

    $('#review').load('index.php?route=product/product/review&product_id={{ product_id }}');

    $('#button-review').on('click', function () {
        $.ajax({
            url: 'index.php?route=product/product/write&product_id={{ product_id }}',
            type: 'post',
            dataType: 'json',
            data: $("#form-review").serialize(),
            beforeSend: function () {
                $('#button-review').button('loading');
            },
            complete: function () {
                $('#button-review').button('reset');
                $('.mask').click();
            },
            success: function (json) {
                $('.alert-dismissible').remove();

                if (json['error']) {
                    $('#tipModule').text(json['error']).show();
                    setTimeout(function () {
                        $('#tipModule').text('').hide();
                    }, 1500);
                    // $('#review').after('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
                }

                if (json['success']) {
                    $('#tipModule').text(json['success']).show();
                    setTimeout(function () {
                        $('#tipModule').text('').hide();
                    }, 1500);
                    // $('#review').after('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

                    $('input[name=\'name\']').val('');
                    $('textarea[name=\'text\']').val('');
                    $('input[name=\'rating\']:checked').prop('checked', false);
                }
            }
        });
    });

    $(document).ready(function () {
        $('.thumbnails').magnificPopup({
            type: 'image',
            delegate: 'a',
            gallery: {
                enabled: true
            }
        });
    });


    $(function () {

        $(".praise").click(function () {

            var praise = $(this);

            var product_id = praise.attr("rel"); //获取HTML页面POST过来的article_id

            var cat_id = praise.attr("rev"); //获取HTML页面POST过来的cat_id

            $.ajax({

                type: "POST",

                url: "{{ praiseurl }}",

                data: "product_id=" + product_id + "&cat_id=" + cat_id,//数据拼接

                cache: false, //不缓存此页面

                success: function (data) {
                    if (data.mesage == '點贊成功') {
                        praise.html('<i class="iconfont icon-zan">贊</i>' + data.num); //显示data并局部刷新
                        alert(data.mesage);
                    } else {

                        alert(data.mesage);
                    }


                },
                error: function () {

                    alert("error");

                }

            });

        });

    });
    //--></script>

{#-----------------------------------------------#}
<script type="text/javascript"><!--
    $('#button-confirm').on('click', function () {

        guestsavehebing();
    });

    function cartadd() {
        $.ajax({
            url: 'index.php?route=checkout/cart/add',
            type: 'post',
            data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
            dataType: 'json',
            beforeSend: function () {
                //$("#button-confirm-mobile").attr('disabled',true);
                $("#button-confirm").attr('disabled', true);
            },
            complete: function () {
                //$("#button-confirm-mobile").attr('disabled',false);

            },
            success: function (json) {
                $('.alert-dismissible, .text-danger').remove();
                $('.form-group').removeClass('has-error');

                if (json['error']) {
                    console.log(json.error);
                    if (json['error']['option']) {
                        var elementnoteop = '';
                        for (i in json['error']['option']) {
                            var element = $('#input-option' + i.replace('_', '-'));
                            var elements = $('#input-options' + i.replace('_', '-'));
                            if (!elementnoteop) {
                                elementnoteop = element;
                                if (element.parent().hasClass('input-group')) {
                                    // if ($(element).parent().children().hasClass('text-danger')) {
                                        $('.text-danger').remove();
                                    // }
                                    element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                                    $('#tipModule').text(json['error']['option'][i]).show();
                                    setTimeout(function () {
                                        $('#tipModule').text('').hide();
                                    }, 1500);
                                    // window.location.hash = "#" + elements.attr("id");
                                    $(window).scrollTop(element.offset().top - 80);
                                } else {
                                    // if ($(element).parent().children().hasClass('text-danger')) {
                                        $('.text-danger').remove();
                                    // }
                                    element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                                    $('#tipModule').text(json['error']['option'][i]).show();
                                    setTimeout(function () {
                                        $('#tipModule').text('').hide();
                                    }, 1500);
                                    // window.location.hash = "#" + elements.attr("id");
                                    $(window).scrollTop(element.offset().top - 80);
                                }


                            }


                        }

                        $("#button-confirm").attr('disabled', false);
                    }

                    if (json['error']['recurring']) {
                        $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
                    }

                    // Highlight any found errors
                    $('.text-danger').parent().addClass('has-error');
                }

                if (json['success']) {

                    confirmhe();


                    //$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

                    //$('html, body').animate({ scrollTop: 0 }, 'slow');

                    //$('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });


    }

    function confirmhe() {
        $.ajax({
            url: 'index.php?route=checkout/confirm_he',
            dataType: 'html',
            beforeSend: function () {
                //$("#button-confirm-mobile").attr('disabled',true);
                $("#button-confirm").attr('disabled', true);
            },
            complete: function () {
                //$("#button-confirm-mobile").attr('disabled',false);

            },
            success: function (html) {
                //$('#collapse-checkout-confirm .panel-body').html(html);

                //$('#button-confirm').on('click', function() {
                $.ajax({
                    url: 'index.php?route=extension/payment/cod/confirm',
                    dataType: 'json',
                    beforeSend: function () {
                        //$("#button-confirm-mobile").attr('disabled',true);
                        $("#button-confirm").attr('disabled', true);
                    },

                    success: function (json) {
                        if (json['redirect']) {
                            location = json['redirect'];
                        }
                        //$("#button-confirm").attr('disabled',false);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
                //});

            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                $("#button-confirm").attr('disabled', false);
            }
        });
        ///////
    }

    function guestsavehebing() {
        $.ajax({
            url: 'index.php?route=checkout/guest/savehebing',
            type: 'post',
            data: $('#collapse-payment-address input[type=\'text\'], #collapse-payment-address input[type=\'date\'], #collapse-payment-address input[type=\'datetime-local\'], #collapse-payment-address input[type=\'time\'], #collapse-payment-address input[type=\'checkbox\']:checked, #collapse-payment-address input[type=\'radio\']:checked, #collapse-payment-address input[type=\'hidden\'], #collapse-payment-address textarea, #collapse-payment-address select'),
            dataType: 'json',
            beforeSend: function () {
                //$("#button-confirm-mobile").attr('disabled',true);
                $("#button-confirm").attr('disabled', true);
            },
            complete: function () {
                //$("#button-confirm-mobile").attr('disabled',false);

            },
            success: function (json) {

                if (json['redirect']) {
                    location = json['redirect'];
                } else if (json['error']) {
                    var elementnoteo = '';
                    for (var i in json['error']) {
                        var element = $('#input-payment-' + i.replace('_', '-'));
                        if (!elementnoteo) {
                            elementnoteo = element;

                            $('.has-error').removeClass('has-error');
                            $('.text-danger').remove();
                            $(element).parent().after('<div class="text-danger">' + json['error'][i] + '</div>');

                            // if ($(element).parent().hasClass('input-group')) {
                            //     // if ($(element).parent().children().hasClass('text-danger')) {
                            //         $('.text-danger').remove();
                            //     // }
                            //     $(element).parent().after('<div class="text-danger">' + json['error'][i] + '</div>');
                            // } else {
                            //     // if ($(element).parent().children().hasClass('text-danger')) {
                            //         $('.text-danger').remove();
                            //     // }
                            //     $(element).parent().after('<div class="text-danger">' + json['error'][i] + '</div>');
                            // }

                            $('#tipModule').text(json['error'][i]).show();
                            setTimeout(function () {
                                $('#tipModule').text('').hide();
                            }, 1500);
                        }


                    }
                    // window.location.hash = "#" + elementnoteo.attr("id");
                    $(window).scrollTop($('#scrollBuy').offset().top-36);


                    $("#button-confirm").attr('disabled', false);
                    // Highlight any found errors
                    $('.text-danger').prev().addClass('has-error');
                } else {


                    cartadd();


                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });

    }


    //--></script>

{#{{ footer }}#}
